import { SearchPanel } from "./search-panel";
import { List } from "./list";
import React, { useEffect, useState } from "react";
import axios from "axios";
import qs from "qs";
import { cleanObject, useDebounce, useMount } from "../../utils";

export const ProjectListScreen = () => {
  const [users, setUsers] = useState([]);

  const [param, setParam] = useState({
    name: "",
    personId: "",
  });
  const [list, setList] = useState([]);
  const debounceDParam = useDebounce(param, 2000);
  useEffect(() => {
    console.log(param);
    axios
      .get(
        `http://localhost:9000/projects?${qs.stringify(
          cleanObject(debounceDParam)
        )}`
      )
      .then((response) => {
        setList(response.data);
      });
  }, [debounceDParam]);
  useMount(() => {
    axios.get("http://localhost:9000/users").then((response) => {
      setUsers(response.data);
    });
  });
  return (
    <div>
      <SearchPanel users={users} param={param} setParam={setParam} />
      <List users={users} list={list} />
    </div>
  );
};
